<template>
    <div  class="top-bar">
        <div class="top-bar__left">
            <!-- 顶部标签卡 -->
            <tags />
        </div>
        <div class="top-bar__right">
            <el-tooltip effect="dark"
                        content="用户头像"
                        placement="bottom">
                <img class="top-bar__img"
                     :src="userInfo.avatar">
            </el-tooltip>
            <el-dropdown>
                <span class="el-dropdown-link">
                    {{userInfo.username}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                        <router-link to="/">首页</router-link>
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <router-link to="/info/index">个人信息</router-link>
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="logout" divided>退出系统</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>

</template>
<script>
    import { mapGetters, mapState } from "vuex"
    import { fullscreenToggel, listenfullscreen } from "@/utils/common"
    import topMenu from "./top-menu"
    import topBreadcrumb from "./top-breadcrumb"
    import topMsg from "./top-msg"
    import tags from './tags'

    export default {
        components: {
            tags,
            topMenu,
            topBreadcrumb,
            topMsg
        },
        name: "top",
        data() {
            return {
                showColor: false
            }
        },
        filters: {},
        created() { },
        mounted() {
            listenfullscreen(this.setScreen)
        },
        computed: {
            ...mapState({
                showDebug: state => state.common.showDebug,
                howColor: false,
                showFullScren: state => false,
                showMenu: state => state.common.showMenu
            }),
            ...mapGetters([
                "userInfo",
                "isFullScren",
                "tagWel",
                "tagList",
                "isCollapse",
                "tag"
            ]),
        },
        methods: {
            handleScreen() {
                fullscreenToggel()
            },
            setCollapse() {
                this.$store.commit("set_collapse")
            },
            setScreen() {
                this.$store.commit("set_fullscren")
            },
            logout() {
                this.$confirm("是否退出系统, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.$store.dispatch("FedLogOut").then(() => {
                        const webRoot = window.location.href.split('#')[0]
                        window.location.replace(`${webRoot}#/login`)
                    })
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>

